<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.order_sn"
        placeholder="订单号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.real_name"
        placeholder="姓名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.mobile"
        placeholder="手机号码"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.idcard"
        placeholder="身份证号码"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        查询
      </el-button>
    </div>
    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <!-- <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_id }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="订单号码" align="center" width="180">
        <template slot-scope="{row}">
          <span>{{ row.order_sn }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" align="center" width="180">
        <template slot-scope="{row}">
          <span>{{ row.idcard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户名称" align="center" width="300">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_status_name.str }}</span>
        </template>
      </el-table-column>

      <el-table-column label="销售人员" class-name="status-col">
        <template slot-scope="{row}">
          {{ row.sale_name }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button v-if="row.order_status>1" type="primary" size="mini" @click="handleRecord(row.order_id)">
            订单记录
          </el-button>
          <el-button size="mini" type="danger" @click="detail(row.order_id)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogRecordVisible" width="960px">
      <el-table
        :key="tableRecord"
        v-loading="listRecordLoading"
        :data="record_list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id" align="center">
          <template slot-scope="{row}">
            <span>{{ row.record_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="管理类别" align="center">
          <template slot-scope="{row}">
            <span>{{ row.type_name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作人" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作内容" align="center">
          <template slot-scope="{row}">
            <span>{{ row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" class-name="status-col">
          <template slot-scope="{row}">
            {{ row.create_time|formatDate }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="recordTotal>0"
        :total="recordTotal"
        :page.sync="listRecordQuery.page"
        :limit.sync="listRecordQuery.limit"
        @pagination="getRecordList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRecordVisible = false">
          关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getBackendRefundOrder,fetchAllList,
  fetchOrderRecordListByOrderId
} from '@/api/order'
import {
  formatDate
} from '@/utils/formatDate.js'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  directives: {
    waves
  },
  filters: {
    formatDate(time) {
      time = time * 1000
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  data() {
    return {
      tableKey: 0,
      tableRecord: 1,
      list: null,
      record_list: null,
      listRecordLoading: true,
      recordTotal: 0,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        real_name: '',
        mobile: '',
        idcard: '',
        order_status: [14,14],
      },
      temp: {
        real_name: '牟少兵',
        mobile: '18696539501',
        idcard: '510781198202247419',
        merchant_id: 2,
        sale_id: 3
      },
      merchant_list: [],
      sale_list: [],
      listRecordQuery: {
        page: 1,
        limit: 20,
        order_id: ''
      },
      textMap: {
        record: '订单记录',
        create: 'Create'
      },
      dialogFormVisible: false,
      dialogRecordVisible: false,
      dialogStatus: '',
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchAllList(this.listQuery).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.0 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    getRecordList() {
      this.listRecordLoading = true
      fetchOrderRecordListByOrderId(this.listRecordQuery).then(response => {
        this.record_list = response.data.list
        this.recordTotal = response.data.count
        setTimeout(() => {
          this.listRecordLoading = false
        }, 1.0 * 1000)
      })
    },
    detail(order_id) {
      this.$router.push('/order/detail/' + order_id)
    },
    handleRecord(order_id) {
      console.log(order_id)
      this.dialogStatus = 'record'
      this.dialogRecordVisible = true
      this.listRecordQuery.order_id = order_id
      fetchOrderRecordListByOrderId(this.listRecordQuery).then(res => {
        this.record_list = res.data.list
        this.recordTotal = res.data.count
        setTimeout(() => {
          this.listRecordLoading = false
        }, 1.0 * 1000)
      })
    },
    resetTemp() {}
  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
  float: left;
}
</style>
